<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Wilson Packing</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://lib.baomitu.com/Swiper/6.4.5/swiper-bundle.min.css">
</head>

<body>
    <div class="header"></div>
    <div class="swiper-banner">
        <ul class="swiper-wrapper">
            <li class="swiper-slide" style="background-image: url('../images/index-banner.png');"></li>
            <li class="swiper-slide" style="background-image: url('../images/index-banner.png');"></li>
            <li class="swiper-slide" style="background-image: url('../images/index-banner.png');"></li>
        </ul>
        <div class="swiper-pagination"></div>
    </div>
    <!-- <div class="index-banner"></div> -->
    <div class="index-container">
        <div class="index-search" style="background-image: url(./images/index-search-eng.png);">
            <select class="select-city">
                <option value="城市">省份</option>
                <option value="城市111">城市111</option>
                <option value="城市222">城市222</option>
                <option value="城市333">城市333</option>

            </select>
            <select class="select-area">
                <option value="区域">城市</option>
            </select>

            <a href="javascript:;" class="search-btn"></a>
        </div>
        <div class="container-banner">
            <a href="javascript:;"></a>
        </div>
        <div class="common-title"><span>Case Study</span></div>
        <div class="solution-container">
            <h4>成功案例</h4>
            <p>威信停车。我们的主要业务包括停车场管理及运营、维护修缮、<br /> 停车场发展及咨询、设备投放、维护及支援等。</p>
        </div>
        <div class="solution-swiper">
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <a href="javascript:;">
                            <div class="image">
                                <img src="./images/image-demo.png" alt="">
                            </div>
                            <p class="dz-nowrap">上海iapm</p>
                        </a>
                    </li>
                    <li class="swiper-slide">
                        <a href="javascript:;">
                            <div class="image">
                                <img src="./images/image-demo.png" alt="">

                            </div>
                            <p class="dz-nowrap">SOHO复兴广场</p>
                        </a>

                    </li>
                    <li class="swiper-slide">
                        <a href="javascript:;">
                            <div class="image">
                                <img src="./images/image-demo.png" alt="">

                            </div>
                            <p class="dz-nowrap">上海仙乐斯广场</p>
                        </a>
                    </li>
                    <li class="swiper-slide">
                        <a href="javascript:;">
                            <div class="image">
                                <img src="./images/image-demo.png" alt="">
                            </div>
                            <p class="dz-nowrap">上海仙乐斯广场</p>
                        </a>
                    </li>
                </ul>
            </div>
            <span class="swiper-next swiper-btn" data-type="prev"></span>
            <span class="swiper-prev swiper-btn" data-type="next"></span>
        </div>
        <a href="javascript:;" class="more-solution">更多方案</a>
    </div>
    <div class="footer"></div>

    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/Swiper/6.4.5/swiper-bundle.min.js"> </script>

    <script>
        $(function () {
            $(".header").load("./common/headerEng.html");
            $(".footer").load("./common/footerEng.html");

            var swiper2 = new Swiper('.swiper-banner', {
                autoplay:true,
                pagination: {
                    el: '.swiper-pagination',
                },
            });
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 30,
                navigation: {
                    nextEl: '.swiper-next',
                    prevEl: '.swiper-prev',
                },
            });



            $(".prev,.next").click(function (e) {

                console.log(swiper);
                if (e.target.dataset.type == 'prev') {

                } else {


                }
            })
        })
    </script>
</body>

</html>